<@c.html>
<div class="panel panel-_default">
    <div class="panel-heading">
        <h1 class="panel-title" style="font-size: 28px;">
            <i class="glyphicon glyphicon-chevron-left" style="border: 2px solid #1D2939;border-radius: 50px;font-size: 28px;"></i>
            datepicker
        </h1>
    </div>
    <div class="panel-body">
        <div class="row">
            <form class="form-horizontal" id="form-table">
                <input name="id" type="hidden" value="${id!""}"/>
                <div class="form-group">
                    <label class="control-label col-sm-3">datetime</label>
                    <div class="col-sm-6">
                        <div class="input-group date form_datetime">
                            <input class="form-control" size="16" type="text" value="2017-12-04 00:00:00" readonly>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-3">date</label>
                    <div class="col-sm-6">
                        <div class="input-group date form_date">
                            <input class="form-control" size="16" type="text" value="2017-12-20 00:00:00" readonly>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-3">time</label>
                    <div class="col-sm-6">
                        <div class="input-group date form_time">
                            <input class="form-control" size="16" type="text" value="" readonly>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="row text-center">
            <button class="btn btn-primary" id="btn-save">save</button>
        </div>
    </div>
</div>
</@c.html>
<script type="text/javascript">
    $(function(){
        $(".form_datetime").datetimepicker({
            language:  'zh-CN',
            format: "yyyy-mm-dd hh:ii:00",
            autoclose: true,
            todayBtn: true,
            pickerPosition: "bottom-left",
        });
        $(".form_date").datetimepicker({
            language:  'zh-CN',
            format: "yyyy-mm-dd",
            minView: 'month',
            autoclose: true,
            todayBtn: true,
            pickerPosition: "bottom-left",
        });
        $(".form_time").datetimepicker({
            language:  'zh-CN',
            format: "hh:ii:00",
            startView: 'day',
            maxView: 'day',
            autoclose: true,
            todayBtn: true,
            pickerPosition: "bottom-left",
        });

        $("#btn-save").click(function(){
            console.log($(".form_datetime input").val());
            console.log($(".form_date input").val());
            console.log($(".form_time input").val());
        });
    });
</script>
